<!-- 表格配置 -->
<template>
  <div style="margin-top:16px">
    <el-form-item label="开启滚动">
      <el-switch v-model="myConfig.scroll" class="float_right"> </el-switch>
    </el-form-item>
    <el-form-item label="开启显隐">
      <el-switch v-model="myConfig.columnShow" class="float_right"> </el-switch>
    </el-form-item>
    <template v-if="myConfig.scroll">
      <el-form-item label="滚动时间">
        <el-input-number
          v-model="myConfig.scrollTime"
          controls-position="right"
        >
        </el-input-number>
      </el-form-item>
      <el-form-item label="滚动行数">
        <el-input-number
          v-model="myConfig.scrollCount"
          controls-position="right"
        >
        </el-input-number>
      </el-form-item>
    </template>
    <el-form-item label="开启排名">
      <el-switch v-model="myConfig.index" class="float_right"></el-switch>
    </el-form-item>
    <hr class="hr_color" style="margin-bottom: 2px" />
    <el-collapse accordion>
      <el-collapse-item title="表头设置">
        <el-form-item label="背景" class="form_item_margin">
           <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.headerBackground"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.headerBackground"
            class="r_160width"
          ></el-input>
        </el-form-item>
        <el-form-item label="字体颜色" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.headerColor"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.headerColor"
            class="r_160width"
          ></el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="表格设置">
        <el-form-item :label="$t('字体')" class="form_item_margin">
          <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.bodyColor"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.bodyColor"
            class="r_96width r_margin_right8"
          >
          </el-input>
          <el-input
            v-model="myConfig.fontSize"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">px</span>
          </el-input>
        </el-form-item>
        <el-form-item label="显示行数">
          <el-input-number
            v-model="myConfig.count"
            controls-position="right"
          >
          </el-input-number>
        </el-form-item>
        <el-form-item label="奇行颜色" class="form_item_margin">
           <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.nthColor"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.nthColor"
            class="r_160width"
          ></el-input>
        </el-form-item>
        <el-form-item label="偶行颜色" class="form_item_margin">
            <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.othColor"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.othColor"
            class="r_160width"
          ></el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="表格列设置">
        <div
          class="l-block"
          style=" padding: 0; margin-bottom: 16px"
        >
          <l-edit-table
            :dataSource="myConfig.column"
            :isShowNum="false"
            @addRow="handleAdd"
            @deleteRow="rowDel"
            class="editTable"
          >
            <el-table-column prop="label" label="名称" minWidth="80">
              <template slot-scope="scope">
                <el-select v-model="scope.row.label" filterable allow-create default-first-option placeholder="key值">
                  <el-option
                    v-for="item in dbOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="prop" label="key值" minWidth="80">
              <template slot-scope="scope">
                <el-select v-model="scope.row.prop" filterable allow-create default-first-option placeholder="key值">
                  <el-option
                    v-for="item in dbOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="width" label="宽度" width="80">
              <template slot-scope="scope">
                <el-input-number
                  size="mini"
                  v-model="scope.row.width"
                  controls-position="right"
                >
                </el-input-number>
              </template>
            </el-table-column>
          </l-edit-table>
        </div>
        <!--<avue-crud :option="tableOption"
                   :data="myConfig.column"
                   @row-save="rowSave"
                   @row-del="rowDel"
                   @row-update="rowUpdate"></avue-crud>-->
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { dicOption, tableOption } from "../../mixins/config";
export default {
  data() {
    return {
      dicOption: dicOption,
      tableOption: tableOption,
    };
  },
  inject: ["main"],
  props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    dbOptions() {
      if (this.main.activeObj.dataType === 2) {
        return this.main.dbOptions
      }
      return this.myConfig.column
    },
    myConfig() {
      return this.config;
    },
  },
  methods: {
    handleAdd() {
      this.myConfig.column.push({
        label: "",
        prop: "",
        width: 80,
      });
    },
    rowDel({ index }) {
      this.myConfig.column.splice(index, 1);
    },

  },
};
</script>

<style>
</style>